import React, { Component } from 'react';
import scss from './recharge.module.scss'
import position from '../../static/position.png'
import { selectListByProductInfoId,getJsSDKSign } from '../../utils/interface'
import { getUrlParam } from "../../utils/tools"
import Loading from '../../comm/loading'
import {fmtDistance} from "../../utils/maths"
class RechargeStationList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            storeList: [],
            length: 0,
            loadingState:true
        }
    }
    render() {
        return (
            <div className={scss.wrap}>
                <Loading loadingState={this.state.loadingState}/>
                <p className={scss.title}>共{this.state.length}家加油站</p>
                <div className={scss.list}>
                    {this.state.storeList.map((item) => {
                        return (
                            <div className={scss.iteml} onClick={this.handleClick.bind(this,item.id)} key={item.id}>
                                <div className={scss.top}>
                                    <p>{item.name}</p>
                                    <div className={scss['station-distance-info']}>
                                        <p>{fmtDistance(item.distance)}  | </p>
                                        <p onClick={this.openLocation.bind(this, item.lat, item.lot)}><img src={position}></img>路线</p>
                                    </div>
                                </div>
                                <div className={scss.bot}>
                                    <p>{item.address}</p>
                                    <div className={scss.state}>
                                        {item.isLastRecharge == 1 ? <span className={scss.active}>上次充值</span> : ""}
                                        {item.isMinDistance == 1 ? <span className={scss.active2}>距离最近</span> : ""}
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        );
    }
    componentDidMount() {
        document.title = "更多站点"
        this.getList()
    }
    getList() {
        console.log(getUrlParam('distanceInfo'))
        let params = getUrlParam('distanceInfo')?JSON.parse(getUrlParam('distanceInfo')):{lat:"",lot:""}
        let memberId = getUrlParam('memberId')?getUrlParam('memberId'):null
        // companyId:getUrlParam('companyId') 
        selectListByProductInfoId({ lat: params.lat, lot: params.lot, memberId: memberId, cityId: getUrlParam('cityId')}).then(res => {
            let storeList =  res.data.result?res.data.result:[]
            storeList.map(item=>{
                console.log(item)
            })
            let length = res.data.result?res.data.result.length:0
            this.setState({
                storeList:storeList,
                length: length,
                loadingState:false
            })
        })
    }
    openLocation(latitude, longitude,e) {
        e.stopPropagation();
        window.wx.miniProgram.navigateTo({
            url:"/pages/map/map?lat="+Number(latitude)+'&lot='+Number(longitude)
        })
    }
    handleClick(storeId){
        window.wx.miniProgram.postMessage({data:{form:2, storeId}})
        window.wx.miniProgram.navigateBack()
    }
}
export default RechargeStationList;